import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, TextInput, View, ToastAndroid } from 'react-native';
import React, { FC, useState } from 'react';
import {register} from './src/api/user'

// let num:number = 100;
// const fn = (a:string,b?:string):string => {
//   console.log(b)

//   return a;
// }

// interface Data<T> {
//   code:string;
//   data:Array<T>;
//   success:string
// }

// interface NewsData {
//   newsTitle:string;
//   newsContext:string;
//   date:string
// }

// interface DraftData {
//   draftTitle:string;
//   draftContext:string;
//   date:string
// }

// let newsdata: Data<NewsData>
// let draftdata: Data<DraftData>

// let news: NewsData = {
//   newsTitle:'1',
//   newsContext:'2',
//   date:'3'
// }

// let arr2:Array<NewsData> = [{newsTitle:'123',newsContext:'456',date:'2023.4.11'}]

// enum Direction{//枚举都是只读的，不能修改
//   up=1,
//   down,
//   left,
//   right
// }

// const dir = {
//   up:1,
//   down:2,
//   left:3
// }

// console.log(Direction.right)

// fn("100");

interface HeaderProps {
  title:string
}

const Register:FC<HeaderProps> = (props) => {
  const [userName,setUserName] = useState<string>('');
  const [password,setPassword] = useState<string>('');

  const handleRegister = (userName:string,password:string) => {
    register({userName,password}).then(res => {
      console.log(res)
      ToastAndroid.show(res.msg,ToastAndroid.SHORT)
    })
  }

  return (
    <View style={{alignItems:'center',justifyContent:'center'}}>
      <Text style={{fontSize:20}}>{props.title}</Text>
      <View>
        <TextInput placeholder='用户名' style={{width:200,borderWidth:1,borderColor:'#000',margin:10}} value={userName} onChangeText={text => setUserName(text)}></TextInput>
        <TextInput placeholder='密码' secureTextEntry={true} style={{width:200,borderWidth:1,borderColor:'#000',margin:10}} value={password} onChangeText={text => setPassword(text)}></TextInput>
      </View>
      <Button title='注册' onPress={() => handleRegister(userName,password)} />
    </View>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Register title='用户注册' />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
